// vue的配置文件 综合了webpack
'use strict' // 启用严格模式
// 引用node里的path模块
const path = require('path')
// 引进管理设置的文件
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
    // path.join方法用于路径片段的拼接，生成规范化的路径。
    // __dirname表示node.js中的一个全局变量，它可以获得
    // 当前文件所在目录从盘符开始的全路径
    return path.join(__dirname, dir)
}
// html中title属性的值
const name = defaultSettings.title || 'Vue Hand Acount'
// 设置npm run dev 的端口号
// process.env是nodejs的一个全局变量，提供有关信息，控制node.js进程
const port = process.env.port || process.env.npm_config_port || 8888
module.exports = {
    publicPath: '/',
    outputDir: 'dist', //打包出口文件夹
    assetsDir: 'static', //打包后的静态资源文件夹名
    // 开启语法校验，true， false， 'warning', 'error', 'default'
    lintOnSave: 'error', // process.env.NODE_ENV === 'development'
    // 打包后是否生成SourceMap————压缩的js与未压缩源文件js之间的映射关系文件
    productionSourceMap: false,
    // 开发环境下的运行配置
    devServer: {
        port,
        // 是否打开浏览器
        open: true,
        // 在浏览器上全屏显示编译的errors或warnings
        overlay: {
            warnings: false,
            errors: true
        },
        // 提供在服务器内部先于所有其他中间件执行自定义中间件的能力，
        // 这可以用来定义自定义处理程序。
        before: require('./mock/mock-server.js')
    },
    configureWebpack: {
        // 给我的app的添加title
        name: name,
        // 指定页面中资源位置的根路径的符号
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    },
    chainWebpack(config) {
        // 可以提高第一屏的速度，建议开启预加载
        config.plugin('preload').tap(() => [
            {
                rel: 'preload',
                fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
                include: 'initial'
            }
        ])

        // 当有很多页面时，会产生很多无意义的请求
        config.plugins.delete('prefetch')
        
        // set svg-sprite-loader
        config.module
        .rule('svg')
        .exclude.add(resolve('src/icons'))
        .end()
    config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
        symbolId: 'icon-[name]'
        })
        .end()

        config
            .when(process.env.NODE_ENV !== 'development',
                config => {
                    config
                        .plugin('ScriptExtHtmlWebpackPlugin')
                        .after('html')
                        .use('script-ext-html-webpack-plugin', [{
                            inline: /runtime\..*\.js$/
                        }])
                        .end()
                    config
                        .optimization.splitChunks({
                            chunks: 'all',
                            cacheGroups: {
                                libs: {
                                    name: 'chunk-libs',
                                    test: /[\\/]node_modules[\\/]/,
                                    priority: 10,
                                    chunks: 'initial' // 只打包最初依赖的第三方
                                },
                                elementUI: {
                                    name: 'chunk-elementUI', // 将elementUI拆分为单个包
                                    priority: 20, // 权重需要大于libs和app，否则它将被打包到libs或app中
                                    test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为了适应cnpm
                                },
                                commons: {
                                    name: 'chunk-commons',
                                    test: resolve('src/components'), // can customize your rules
                                    minChunks: 3, //  minimum common number
                                    priority: 5,
                                    reuseExistingChunk: true
                                }
                            }
                        })
                    config.optimization.runtimeChunk('single')
                })
    }
}